<template>
  <a-modal v-bind="curModalOptions" v-model:open="curVisible" @close="onClose">
    <template #closeIcon>
      <Icon
        v-if="curFrontType === BwCustomComFrontTypeEnum.pc"
        class="bw-extra-icon"
        :icon="
          isMax
            ? 'ant-design:fullscreen-exit-outlined'
            : 'ant-design:fullscreen-outlined'
        "
        @click.stop="onSize(!isMax)"
      />
      <Icon
        class="bw-close-icon"
        icon="ant-design:close-outlined"
        @click="onClose"
      />
    </template>

    <Select
      v-model:value="curFrontType"
      @change="onChangePreview"
      :style="{ width: '150px' }"
    >
      <SelectOption :value="BwCustomComFrontTypeEnum.pc">pc端</SelectOption>
      <SelectOption :value="BwCustomComFrontTypeEnum.ios">ios端</SelectOption>
      <SelectOption :value="BwCustomComFrontTypeEnum.android">
        android端
      </SelectOption>
    </Select>

    <component :is="curCurtomCom">
      <template #col_0_12> 1111 </template>
      <template #col_1_12> 2222 </template>
    </component>
  </a-modal>
</template>

<script lang="ts" setup>
import { isFunction } from 'lodash-es'
import { CustomComPreveiw } from './utils'
import { ref, computed, inject, markRaw, watch } from 'vue'
import { useComDesignStoreWithOut } from '@/store'

import type { ComputedRef } from 'vue'
import {
  BwCustomComFrontTypeEnum,
  type BwCustomComDesignInfoModel,
} from '@bitwit/base-com-render'
import { Select } from 'ant-design-vue'
const SelectOption = Select.Option

const designStore = useComDesignStoreWithOut()
const previewState = inject<ComputedRef | null>('previewState', null)
const setPreviewState = inject<Function | null>('setPreviewState', null)

const isMax = ref<boolean>(false)
const curCurtomCom = ref<any>(null)
const curVisible = ref<boolean>(false)
const curModalOptions = computed(() => {
  return {
    zIndex: 999,
    footer: null,
    title: '自定义组件预览',
    destroyOnClose: true,
    wrapClassName: [
      curFrontType.value === BwCustomComFrontTypeEnum.pc
        ? 'bw-custom-com-preview'
        : 'bw-custom-com-preview-mobile',
      isMax.value ? 'bw-custom-com-preview-full-screen' : '',
    ].join(' '),
    centered: true,
  }
})

const curFrontType = ref<BwCustomComFrontTypeEnum>(BwCustomComFrontTypeEnum.pc)

const curIns = new CustomComPreveiw({
  front: BwCustomComFrontTypeEnum.pc,
})

const onSize = (v: boolean) => {
  isMax.value = v
}
const onClose = () => {
  curVisible.value = false
}

/** 初始化实例组件 */
const initInsCurtomCom = (formInfo: BwCustomComDesignInfoModel) => {
  try {
    curIns.setDesignInfo(formInfo)
    const ele: any = curIns.getCom()

    curCurtomCom.value = markRaw(ele)
  } catch (error) {
    console.error(error)
  }
}

/** 切换预览模式 */
const onChangePreview = () => {
  try {
    curIns.setFront(curFrontType.value)

    const ele: any = curIns.refreshCom()
    curCurtomCom.value = markRaw(ele)
  } catch (error) {
    console.error(error)
  }
}

watch(
  () => curVisible.value,
  (newVal) => {
    if (!newVal && isFunction(setPreviewState)) {
      setPreviewState(newVal)
    }
  },
  { deep: true, immediate: true }
)

watch(
  () => previewState,
  (newVal) => {
    if (newVal && newVal.value) {
      const designInfo = designStore.getDesignInfo

      curFrontType.value = BwCustomComFrontTypeEnum.pc
      curVisible.value = true
      designInfo && initInsCurtomCom(designInfo)
    }
  },
  { deep: true, immediate: true }
)
</script>

<style lang="less">
.bw-custom-com-preview {
  .ant-modal {
    width: 80vw !important;
    min-width: 1024px !important;

    .ant-modal-content {
      min-height: 320px;
    }
  }
  &-mobile {
    .ant-modal {
      .ant-modal-content {
        max-width: 424px;

        .ant-modal-body {
          height: 784px;
        }
      }
    }
  }

  .ant-modal-close {
    width: 50px;

    &:hover {
      color: rgba(0, 0, 0, 0.45);
      background: transparent;
    }

    .ant-modal-close-x {
      display: inline-flex;

      .bw-close-icon,
      .bw-extra-icon {
        padding: 5px;
        border-radius: 3px;

        &:hover {
          color: rgba(0, 0, 0, 0.88);
          background-color: rgba(0, 0, 0, 0.06);
        }
      }
    }
  }

  .bw-custom-com-container {
    width: 100%;
    height: 100%;
  }
}

.bw-custom-com-preview-full-screen {
  .ant-modal {
    top: 0;
    left: 0;
    position: fixed;

    .ant-modal-content {
      border-radius: 0;
      width: 100vw !important;
      height: 100vh !important;
    }
  }
}
</style>
